<template>
  <div>
    <div class="opt-area-02">
      <div class="right-con">
        <div class="input-frame">
          <Input type="text" @on-click="init()" placeholder="请输入姓名" style="width: 164px;margin-left: 5px;" v-model="params.user_name" icon="ios-search"/>
          <Input type="text" @on-click="init()" placeholder="请输入证件号" style="width: 164px;margin-left: 5px;" v-model="params.cardno" icon="ios-search"/>
        </div>
        <Button type="success" class="button-in" size="small">
          <a :href="excelUrl" style="color: white">下载导入模板</a>
        </Button>
        <Button type="warning" class="button-in" @click="upModal3()" size="small">导入人员信息</Button>
        <Button type="info" class="button-in" @click="upModal1()" size="small">添加人员信息</Button>
      </div>
    </div>
    <div>
      <Table :columns="columns1" :loading="loading" border :data="data1" size="small">
        <template slot-scope="{ index }" slot="index">
          <strong>{{ index + 1 }}</strong>
        </template>
        <template slot-scope="{ row }" slot="action">
          <Button type="primary" size="small" style="margin-right: 5px" @click="upModal2(row)">详情</Button>
          <Button type="error" size="small" @click="deleteRow(row)">删除</Button>
        </template>
      </Table>
      <Row type="flex" justify="end" class="page_style">
        <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize" show-total @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
      </Row>
    </div>
      <Drawer title="添加人员信息" width="50%" :closable="false" v-model="modal1">
        <Form :model="data2" :label-width="80" inline>
          <Row>
            <Col span="12">
              <FormItem label="姓名" class="info-row">
                <Input v-model="data2.user_name"  placeholder="请输入姓名" />
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="证件号" class="info-row">
                <Input v-model="data2.cardno" placeholder="请输入证件号"/>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="12">
              <FormItem label="证件类型" class="info-row">
                <!--<RadioGroup v-model="data2.card_type">
                  <Radio label="1" border style="margin-right:10px">身份证号</Radio>
                  <Radio label="2" border style="margin-right:10px">军官证</Radio>
                  <Radio label="3" border style="margin-right:10px">护照</Radio>
                  <Radio label="4" border style="margin-right:10px">港澳通行证</Radio>
                  <Radio label="5" border style="margin-right:10px;margin-top: 5px">台胞证</Radio>
                </RadioGroup>-->
                <Select v-model="data2.card_type" placeholder="请选择证件类型" style="width: 144%;">
                  <Option v-for="item in userList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="小区名称" class="info-row">
                <Select v-model="data2.pick_garden" placeholder="请选择小区名称" style="width: 144%;">
                  <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="12">
              <FormItem label="电话号" class="info-row">
                <Input v-model="data2.mobile"  placeholder="请输入电话号"/>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="工作单位" class="info-row">
                <Input v-model="data2.work_unit" style="width: 100%;"  placeholder="请输入工作单位"/>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="12">
              <FormItem label="职业" class="info-row">
                <Input v-model="data2.occupation"  placeholder="请输入职业"/>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="接种点" class="info-row">
                <Input v-model="data2.pick_vaccination"  placeholder="请输入接种点"/>
              </FormItem>
            </Col>
          </Row>
          <div style="text-align:center">
            <span>具体地址</span><Input v-model="data2.address" type="textarea" :autosize="{minRows: 5,maxRows: 5}" placeholder="请输入具体地址"></Input>
          </div>
         </Form>
       <div class="demo-drawer-footer">
          <Button style="margin-right: 8px" @click="modal1 = false">取消</Button>
          <Button type="primary" @click="insertOk()">保存</Button>
        </div>
      </Drawer>
    <Drawer title="修改人员信息" width="50%" :closable="false" v-model="modal2">
      <Form :model="data2" :label-width="80" inline>
        <Row>
          <Col span="12">
            <FormItem label="姓名" class="info-row">
              <Input v-model="data2.user_name"  placeholder="请输入姓名" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="证件号" class="info-row">
              <Input v-model="data2.cardno" placeholder="请输入证件号"/>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="证件类型" class="info-row">
              <!--<RadioGroup v-model="data2.card_type">
                <Radio label="1" border style="margin-right:10px">身份证号</Radio>
                <Radio label="2" border style="margin-right:10px">军官证</Radio>
                <Radio label="3" border style="margin-right:10px">护照</Radio>
                <Radio label="4" border style="margin-right:10px">港澳通行证</Radio>
                <Radio label="5" border style="margin-right:10px;margin-top: 5px">台胞证</Radio>
              </RadioGroup>-->
              <Select v-model="data2.card_type" placeholder="请选择证件类型" style="width: 144%;">
                <Option v-for="item in userList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="小区名称" class="info-row">
              <Select v-model="data2.pick_garden" placeholder="请选择小区名称" style="width: 144%;">
                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="电话号" class="info-row">
              <Input v-model="data2.mobile"  placeholder="请输入电话号"/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="工作单位" class="info-row">
              <Input v-model="data2.work_unit" style="width: 100%;"  placeholder="请输入工作单位"/>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="职业" class="info-row">
              <Input v-model="data2.occupation"  placeholder="请输入职业"/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="接种点" class="info-row">
              <Input v-model="data2.pick_vaccination"  placeholder="请输入接种点"/>
            </FormItem>
          </Col>
        </Row>
        <div style="text-align:center">
          <span>具体地址</span><Input v-model="data2.address" type="textarea" :autosize="{minRows: 5,maxRows: 5}" placeholder="请输入具体地址"></Input>
        </div>
      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="modal1 = false">取消</Button>
        <Button type="primary" @click="insertOk2()">保存</Button>
      </div>
    </Drawer>
    <Modal
      v-model="modal"
      @on-ok="init()"
      @on-cancel="init()"
      width="100%"
      title="导入人员数据">
      <dispose-excel :columns="columns" :url="url" ref="disposeExcel"></dispose-excel>
    </Modal>
  </div>
</template>

<script>
import { selectVillageNameList, selectVaccinationList, insertVaccination, updateVaccination } from '@/api/yi-qing-fang-kong'
import DisposeExcel from '../dispose-excel/dispose-excel'
export default {
  name: 'personnel-information-list',
  components: { DisposeExcel },
  data () {
    return {
      columns1: [
        { title: '序号', width: 60, slot: 'index', align: 'center' },
        { title: '姓名', key: 'user_name', width: 80, align: 'center' },
        { title: '证件类型', key: 'card_type', align: 'center' },
        { title: '身份证号', key: 'card_no', width: 120, align: 'center' },
        { title: '电话号码', key: 'mobile', align: 'center' },
        { title: '工作单位', key: 'work_unit', align: 'center' },
        { title: '职业', key: 'occupation', align: 'center' },
        { title: '小区', key: 'pick_garden', align: 'center' },
        { title: '接种点', key: 'pick_vaccination', align: 'center' },
        { title: '具体地址', key: 'address', width: 120, align: 'center' },
        { title: '操作', width: 140, slot: 'action', align: 'center' }
      ],
      loading: true,
      columns: [
        { title: '姓名', key: 'user_name', align: 'center', fixed: 'left' },
        { title: '证件类型', key: 'card_type', align: 'center', fixed: 'left' },
        { title: '身份证号', key: 'cardno', align: 'center' },
        { title: '电话号码', key: 'mobile', align: 'center' },
        { title: '工作单位', key: 'work_unit', align: 'center' },
        { title: '职业', key: 'occupation', align: 'center' },
        { title: '小区', key: 'pick_garden', align: 'center' },
        { title: '具体地址', key: 'address', align: 'center' },
        { title: '接种点', key: 'pick_vaccination', align: 'center' }
      ],
      params: {
        user_name: '',
        cardno: '',
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      data2: {
        user_name: '',
        cardno: '',
        card_type: '',
        mobile: '',
        occupation: '',
        work_unit: '',
        address: '',
        pick_garden: '',
        pick_vaccination: '',
        id: '',
        source_type: 1,
        del_flag: 0
      },
      data1: [],
      modal1: false,
      modal2: false,
      userList: [
        { value: '1', label: '身份证号' },
        { value: '2', label: '军官证' },
        { value: '3', label: '护照' },
        { value: '4', label: '港澳通行证' },
        { value: '5', label: '台胞证' }
      ],
      cityList: [],
      modal: false,
      url: '/api/ac/xgc/communityService/insertVaccination',
      excelUrl: 'http://imgdl.tripln.top/webhdfs/v1/importTemplate/社区白名单人员批量导入v2_4519914713.xlsx?op=OPEN&namenoderpcaddress=hadoop01:9000&offset=0'
    }
  },
  computed: {},
  watch: {},
  mounted () {
    this.init()
    this.initCity()
  },
  methods: {
    init () {
      selectVaccinationList(this.params).then((ret) => {
        if (ret.data.errcode === 0) {
          this.data1 = ret.data.data.results
          this.params.totalRecord = ret.data.data.totalRecord
          this.loading = false
        } else {
          this.$Notice.error({
            title: '查询信息失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    initCity () {
      selectVillageNameList().then((ret) => {
        if (ret.data.errcode === 0) {
          this.cityList = ret.data.data
        } else {
          this.$Notice.error({
            title: '查询信息失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    upModal1 () {
      this.modal1 = true
      this.data2.user_name = ''
      this.data2.card_type = ''
      this.data2.cardno = ''
      this.data2.mobile = ''
      this.data2.occupation = ''
      this.data2.work_unit = ''
      this.data2.address = ''
      this.data2.pick_garden = ''
      this.data2.pick_vaccination = ''
    },
    upModal3 () {
      this.modal = true
      this.$refs.disposeExcel.tableShowMethods()
    },
    upModal2 (param) {
      this.modal2 = true
      this.data2.user_name = param.user_name
      if (param.card_type === '身份证号') {
        this.data2.card_type = '1'
      } else if (param.card_type === '军官证') {
        this.data2.card_type = '2'
      } else if (param.card_type === '护照') {
        this.data2.card_type = '3'
      } else if (param.card_type === '港澳通行证') {
        this.data2.card_type = '4'
      } else {
        this.data2.card_type = '5'
      }
      this.data2.cardno = param.card_no
      this.data2.mobile = param.mobile
      this.data2.occupation = param.occupation
      this.data2.work_unit = param.work_unit
      this.data2.address = param.address
      this.data2.pick_garden = param.pick_garden
      this.data2.pick_vaccination = param.pick_vaccination
      this.data2.id = param.id
      this.data2.del_flag = param.del_flag
    },
    insertOk () {
      insertVaccination(this.data2).then((ret) => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({
            title: '添加成功'
          })
          this.modal1 = false
          this.init()
        } else {
          this.$Notice.error({
            title: '添加失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    insertOk2 () {
      updateVaccination(this.data2).then((ret) => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({
            title: '修改成功'
          })
          this.modal2 = false
          this.init()
        } else {
          this.$Notice.error({
            title: '修改失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    deleteRow (param) {
      console.log(param.card_type)
      this.data2.del_flag = '1'
      this.data2.user_name = param.user_name
      if (param.card_type === '身份证号') {
        this.data2.card_type = '1'
      } else if (param.card_type === '军官证') {
        this.data2.card_type = '2'
      } else if (param.card_type === '护照') {
        this.data2.card_type = '3'
      } else if (param.card_type === '港澳通行证') {
        this.data2.card_type = '4'
      } else {
        this.data2.card_type = '5'
      }
      this.data2.cardno = param.card_no
      this.data2.mobile = param.mobile
      this.data2.occupation = param.occupation
      this.data2.address = param.address
      this.data2.pick_garden = param.pick_garden
      this.data2.pick_vaccination = param.pick_vaccination
      this.data2.id = param.id
      updateVaccination(this.data2).then((ret) => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({
            title: '删除成功'
          })
          this.init()
        } else {
          this.$Notice.error({
            title: '删除失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    pageAction (page) {
      this.params.pageNo = page
      this.init()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.init(this.params.pageNo)
    }
  }
}
</script>

<style scoped>
  .opt-area-02 .right-con {
    width: 100%;
    margin-top: 5px;
    display: flex;
  }

  .opt-area-02 .right-con input {
    width: 150px;
    margin-right: 10px;
  }

  .button-in {
    width: 100px;
    margin-top: 5px;
    margin-left: 5px;
  }

  .opt-area-02 .right-con .input-frame {
    width: 100%;
    margin-right: 10px;
  }

  .opt-area-02 {
    display: flex;
    align-items: center;
    flex-direction: column;
    border: 1px solid #abdcff;
    background-color: #f0faff;
    padding: 8px 16px 8px 16px;
    border-radius: 4px;
    margin-bottom: 10px;
  }
  .info-row{
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .demo-drawer-footer{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
</style>
